C.S.Burner 🪙 ━►🔥GIT Node
Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / settings / sections / AppearanceSettingsSection.vue
Displaying Raw • Download
meshchatx/src/frontend/components/settings/sections/AppearanceSettingsSection.vue e0f1f99cd1c208c5008a936230c38e448dddd45d (e0f1f99c) Text, 21.41 KB
T8b949e<!-- SPDX-License-Identifier: 0BSD -->
Tff7b72<templateTff7b72>
Tff7b72<section Te6edf3v-show=Ta5d6ff"Ta5d6ffvisibleTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsettings-section break-inside-avoidTa5d6ff"Tff7b72>
Tff7b72<header Te6edf3class=Ta5d6ff"Ta5d6ffsettings-section__headerTa5d6ff"Tff7b72>
Tff7b72<divTff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffsettings-section__eyebrowTa5d6ff"Tff7b72>PersonaliseTff7b72</div>
Tff7b72<h2Tff7b72>{{ Te6edf3$t("app.appearance") }}Tff7b72</h2>
Tff7b72<pTff7b72>{{ Te6edf3$t("app.appearance_description") }}Tff7b72</p>
Tff7b72</div>
Tff7b72</header>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffsettings-section__body space-y-4Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-2Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-medium text-gray-900 dark:text-gray-100Ta5d6ff"Tff7b72>
{{ Te6edf3$t("app.theme") }}
Tff7b72</div>
Tff7b72<select Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.themeTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffinput-fieldTa5d6ff" @Te6edf3change=Ta5d6ff"Ta5d6ffonThemeSelectTa5d6ff"Tff7b72>
Tff7b72<option Te6edf3value=Ta5d6ff"Ta5d6fflightTa5d6ff"Tff7b72>{{ Te6edf3$t("app.light_theme") }}Tff7b72</option>
Tff7b72<option Te6edf3value=Ta5d6ff"Ta5d6ffdarkTa5d6ff"Tff7b72>{{ Te6edf3$t("app.dark_theme") }}Tff7b72</option>
Tff7b72</select>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-2Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-medium text-gray-900 dark:text-gray-100Ta5d6ff"Tff7b72>
{{ Te6edf3$t("app.messages_sidebar_position") }}
Tff7b72</div>
Tff7b72<select
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.messages_sidebar_positionTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffinput-fieldTa5d6ff"
@Te6edf3change=Ta5d6ff"Ta5d6ffonMessagesSidebarPositionSelectTa5d6ff"
Tff7b72>
Tff7b72<option Te6edf3value=Ta5d6ff"Ta5d6ffleftTa5d6ff"Tff7b72>{{ Te6edf3$t("app.messages_sidebar_position_left") }}Tff7b72</option>
Tff7b72<option Te6edf3value=Ta5d6ff"Ta5d6ffrightTa5d6ff"Tff7b72>{{ Te6edf3$t("app.messages_sidebar_position_right") }}Tff7b72</option>
Tff7b72</select>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-2Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center justify-betweenTa5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-medium text-gray-900 dark:text-gray-100Ta5d6ff"Tff7b72>Message Font SizeTff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-xs font-mono text-blue-500 dark:text-blue-400Ta5d6ff"Tff7b72>
{{ config.message_font_size || 14 }}px
Tff7b72</div>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-3Ta5d6ff"Tff7b72>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6fftext-xs text-gray-400Ta5d6ff"Tff7b72>ATff7b72</span>
Tff7b72<input
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.message_font_sizeTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6ffrangeTa5d6ff"
Te6edf3min=Ta5d6ff"Ta5d6ff10Ta5d6ff"
Te6edf3max=Ta5d6ff"Ta5d6ff32Ta5d6ff"
Te6edf3step=Ta5d6ff"Ta5d6ff1Ta5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffflex-1 h-1.5 bg-gray-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-blue-500Ta5d6ff"
@Te6edf3input=Ta5d6ff"Ta5d6ffonMessageFontSizeInputTa5d6ff"
Tff7b72/>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6fftext-lg text-gray-400Ta5d6ff"Tff7b72>ATff7b72</span>
Tff7b72</div>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-2Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center justify-betweenTa5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-medium text-gray-900 dark:text-gray-100Ta5d6ff"Tff7b72>Icon SizeTff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-xs font-mono text-blue-500 dark:text-blue-400Ta5d6ff"Tff7b72>
{{ config.message_icon_size || 28 }}px
Tff7b72</div>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-3Ta5d6ff"Tff7b72>
Tff7b72<MaterialDesignIcon
Te6edf3icon-name=Ta5d6ff"Ta5d6ffaccount-outlineTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffshrink-0 text-gray-400Ta5d6ff"
Te6edf3:style=Ta5d6ff"Ta5d6ff{ width: Ta5d6ff'Ta5d6ff16pxTa5d6ff'Ta5d6ff, height: Ta5d6ff'Ta5d6ff16pxTa5d6ff'Ta5d6ff }Ta5d6ff"
Tff7b72/>
Tff7b72<input
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.message_icon_sizeTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6ffrangeTa5d6ff"
Te6edf3min=Ta5d6ff"Ta5d6ff16Ta5d6ff"
Te6edf3max=Ta5d6ff"Ta5d6ff64Ta5d6ff"
Te6edf3step=Ta5d6ff"Ta5d6ff1Ta5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffflex-1 h-1.5 bg-gray-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-blue-500Ta5d6ff"
@Te6edf3input=Ta5d6ff"Ta5d6ffonMessageIconSizeInputTa5d6ff"
Tff7b72/>
Tff7b72<MaterialDesignIcon
Te6edf3icon-name=Ta5d6ff"Ta5d6ffaccountTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffshrink-0 text-gray-500 dark:text-gray-300Ta5d6ff"
Te6edf3:style=Ta5d6ff"Ta5d6ffmessageIconPreviewStyleTa5d6ff"
Tff7b72/>
Tff7b72</div>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-2Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center justify-betweenTa5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-medium text-gray-900 dark:text-gray-100Ta5d6ff"Tff7b72>
{{ Te6edf3$t("app.ui_transparency") }}
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-xs font-mono text-blue-500 dark:text-blue-400Ta5d6ff"Tff7b72>
{{ Math.max(0, Math.min(100, Number(config.ui_transparency) || 0)) }}%
Tff7b72</div>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-3Ta5d6ff"Tff7b72>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6fftext-xs text-gray-400Ta5d6ff"Tff7b72>0Tff7b72</span>
Tff7b72<input
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.ui_transparencyTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6ffrangeTa5d6ff"
Te6edf3min=Ta5d6ff"Ta5d6ff0Ta5d6ff"
Te6edf3max=Ta5d6ff"Ta5d6ff100Ta5d6ff"
Te6edf3step=Ta5d6ff"Ta5d6ff1Ta5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffflex-1 h-1.5 bg-gray-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-blue-500Ta5d6ff"
@Te6edf3input=Ta5d6ff"Ta5d6ffonUiTransparencyInputTa5d6ff"
Tff7b72/>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6fftext-xs text-gray-400Ta5d6ff"Tff7b72>100Tff7b72</span>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-xs text-gray-600 dark:text-gray-400Ta5d6ff"Tff7b72>
{{ Te6edf3$t("app.ui_transparency_description") }}
Tff7b72</div>
Tff7b72</div>
Tff7b72<label Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggleTa5d6ff"Tff7b72>
Tff7b72<Toggle
Te6edf3id=Ta5d6ff"Ta5d6ffui-glass-enabledTa5d6ff"
Te6edf3:model-value=Ta5d6ff"Ta5d6ffconfig.ui_glass_enabledTa5d6ff"
@Te6edf3update:model-value=Ta5d6ff"Ta5d6ffonUiGlassEnabledToggleTa5d6ff"
Tff7b72/>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggle__labelTa5d6ff"Tff7b72>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggle__titleTa5d6ff"Tff7b72>{{ Te6edf3$t("app.ui_glass_enabled") }}Tff7b72</span>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggle__descriptionTa5d6ff"Tff7b72>{{ Te6edf3$t("app.ui_glass_enabled_description") }}Tff7b72</span>
Tff7b72</span>
Tff7b72</label>
Tff7b72<label Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggleTa5d6ff"Tff7b72>
Tff7b72<Toggle
Te6edf3id=Ta5d6ff"Ta5d6ffmessages-multi-pane-enabledTa5d6ff"
Te6edf3:model-value=Ta5d6ff"Ta5d6ffconfig.messages_multi_pane_enabledTa5d6ff"
@Te6edf3update:model-value=Ta5d6ff"Ta5d6ffonMessagesMultiPaneEnabledToggleTa5d6ff"
Tff7b72/>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggle__labelTa5d6ff"Tff7b72>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggle__titleTa5d6ff"Tff7b72>{{ Te6edf3$t("app.messages_multi_pane_enabled") }}Tff7b72</span>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggle__descriptionTa5d6ff"Tff7b72>{{
Te6edf3$t("app.messages_multi_pane_enabled_description")
}}Tff7b72</span>
Tff7b72</span>
Tff7b72</label>
Tff7b72<label Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggleTa5d6ff"Tff7b72>
Tff7b72<Toggle
Te6edf3id=Ta5d6ff"Ta5d6ffnomad-tabs-enabledTa5d6ff"
Te6edf3:model-value=Ta5d6ff"Ta5d6ffconfig.nomad_tabs_enabledTa5d6ff"
@Te6edf3update:model-value=Ta5d6ff"Ta5d6ffonNomadTabsEnabledToggleTa5d6ff"
Tff7b72/>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggle__labelTa5d6ff"Tff7b72>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggle__titleTa5d6ff"Tff7b72>{{ Te6edf3$t("app.nomad_tabs_enabled") }}Tff7b72</span>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggle__descriptionTa5d6ff"Tff7b72>{{ Te6edf3$t("app.nomad_tabs_enabled_description") }}Tff7b72</span>
Tff7b72</span>
Tff7b72</label>
Tff7b72<label Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggleTa5d6ff"Tff7b72>
Tff7b72<Toggle Te6edf3id=Ta5d6ff"Ta5d6ffrrc-enabledTa5d6ff" Te6edf3:model-value=Ta5d6ff"Ta5d6ffconfig.rrc_enabledTa5d6ff" @Te6edf3update:model-value=Ta5d6ff"Ta5d6ffonRrcEnabledToggleTa5d6ff" Tff7b72/>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggle__labelTa5d6ff"Tff7b72>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggle__titleTa5d6ff"Tff7b72>{{ Te6edf3$t("app.rrc_enabled") }}Tff7b72</span>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggle__descriptionTa5d6ff"Tff7b72>{{ Te6edf3$t("app.rrc_enabled_description") }}Tff7b72</span>
Tff7b72</span>
Tff7b72</label>
Tff7b72<label Te6edf3v-if=Ta5d6ff"Ta5d6ffconfig.rrc_enabledTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggleTa5d6ff"Tff7b72>
Tff7b72<Toggle
Te6edf3id=Ta5d6ff"Ta5d6ffrrc-unread-badgesTa5d6ff"
Te6edf3:model-value=Ta5d6ff"Ta5d6ffconfig.rrc_unread_badges_enabledTa5d6ff"
@Te6edf3update:model-value=Ta5d6ff"Ta5d6ffonRrcUnreadBadgesEnabledToggleTa5d6ff"
Tff7b72/>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggle__labelTa5d6ff"Tff7b72>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggle__titleTa5d6ff"Tff7b72>{{ Te6edf3$t("app.rrc_unread_badges_enabled") }}Tff7b72</span>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffsetting-toggle__descriptionTa5d6ff"Tff7b72>{{
Te6edf3$t("app.rrc_unread_badges_enabled_description")
}}Tff7b72</span>
Tff7b72</span>
Tff7b72</label>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffpt-1Ta5d6ff"Tff7b72>
Tff7b72<button
Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffp-0 border-0 bg-transparent text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline cursor-pointerTa5d6ff"
@Te6edf3click=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffreset-appearance-defaultsTa5d6ff'Ta5d6ff)Ta5d6ff"
Tff7b72>
{{ Te6edf3$t("app.reset_appearance_defaults") }}
Tff7b72</button>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-4 pt-2Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-bold text-gray-400 dark:text-zinc-500 uppercase tracking-widerTa5d6ff"Tff7b72>
Message Bubbles
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-start gap-3 rounded-xl border border-gray-200 dark:border-zinc-700 px-3 py-2.5Ta5d6ff"Tff7b72>
Tff7b72<input
Te6edf3id=Ta5d6ff"Ta5d6ffdetailed-outbound-send-statusTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6ffcheckboxTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffmt-1 rounded-sm border-gray-300 dark:border-zinc-600Ta5d6ff"
Te6edf3:checked=Ta5d6ff"Ta5d6ffdetailedOutboundSendStatusTa5d6ff"
@Te6edf3change=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffdetailed-outbound-send-status-changeTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"
Tff7b72/>
Tff7b72<label Te6edf3for=Ta5d6ff"Ta5d6ffdetailed-outbound-send-statusTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffmin-w-0 cursor-pointerTa5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-medium text-gray-900 dark:text-gray-100Ta5d6ff"Tff7b72>
{{ Te6edf3$t("app.detailed_outbound_send_status") }}
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-xs text-gray-500 dark:text-zinc-400 mt-0.5Ta5d6ff"Tff7b72>
{{ Te6edf3$t("app.detailed_outbound_send_status_description") }}
Tff7b72</div>
Tff7b72</label>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-start gap-3 rounded-xl border border-gray-200 dark:border-zinc-700 px-3 py-2.5Ta5d6ff"Tff7b72>
Tff7b72<input
Te6edf3id=Ta5d6ff"Ta5d6ffoutbound-transfer-progress-enabledTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6ffcheckboxTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffmt-1 rounded-sm border-gray-300 dark:border-zinc-600Ta5d6ff"
Te6edf3:checked=Ta5d6ff"Ta5d6ffoutboundTransferProgressEnabledTa5d6ff"
@Te6edf3change=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffoutbound-transfer-progress-enabled-changeTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"
Tff7b72/>
Tff7b72<label Te6edf3for=Ta5d6ff"Ta5d6ffoutbound-transfer-progress-enabledTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffmin-w-0 cursor-pointerTa5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-medium text-gray-900 dark:text-gray-100Ta5d6ff"Tff7b72>
{{ Te6edf3$t("app.outbound_transfer_progress_enabled") }}
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-xs text-gray-500 dark:text-zinc-400 mt-0.5Ta5d6ff"Tff7b72>
{{ Te6edf3$t("app.outbound_transfer_progress_enabled_description") }}
Tff7b72</div>
Tff7b72</label>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-start gap-3 rounded-xl border border-gray-200 dark:border-zinc-700 px-3 py-2.5Ta5d6ff"Tff7b72>
Tff7b72<input
Te6edf3id=Ta5d6ff"Ta5d6ffmessage-timestamp-groupingTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6ffcheckboxTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffmt-1 rounded-sm border-gray-300 dark:border-zinc-600Ta5d6ff"
Te6edf3:checked=Ta5d6ff"Ta5d6ffmessageTimestampGroupingEnabledTa5d6ff"
@Te6edf3change=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffmessage-timestamp-grouping-changeTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"
Tff7b72/>
Tff7b72<label Te6edf3for=Ta5d6ff"Ta5d6ffmessage-timestamp-groupingTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffmin-w-0 cursor-pointerTa5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-medium text-gray-900 dark:text-gray-100Ta5d6ff"Tff7b72>
{{ Te6edf3$t("app.message_timestamp_grouping") }}
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-xs text-gray-500 dark:text-zinc-400 mt-0.5Ta5d6ff"Tff7b72>
{{ Te6edf3$t("app.message_timestamp_grouping_description") }}
Tff7b72</div>
Tff7b72</label>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffgrid grid-cols-1 sm:grid-cols-2 gap-4Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-2Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-medium text-gray-900 dark:text-gray-100Ta5d6ff"Tff7b72>Outbound ColorTff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex gap-2Ta5d6ff"Tff7b72>
Tff7b72<input
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.message_outbound_bubble_colorTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6ffcolorTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffw-12 h-10 rounded-xl border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 cursor-pointerTa5d6ff"
@Te6edf3input=Ta5d6ff"Ta5d6ffonBubbleColorInput(Ta5d6ff'Ta5d6ffoutboundTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"
Tff7b72/>
Tff7b72<input
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.message_outbound_bubble_colorTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6fftextTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffinput-field monospace-field flex-1Ta5d6ff"
@Te6edf3input=Ta5d6ff"Ta5d6ffonBubbleColorInput(Ta5d6ff'Ta5d6ffoutboundTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"
Tff7b72/>
Tff7b72</div>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-2Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-medium text-gray-900 dark:text-gray-100Ta5d6ff"Tff7b72>Failed ColorTff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex gap-2Ta5d6ff"Tff7b72>
Tff7b72<input
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.message_failed_bubble_colorTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6ffcolorTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffw-12 h-10 rounded-xl border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 cursor-pointerTa5d6ff"
@Te6edf3input=Ta5d6ff"Ta5d6ffonBubbleColorInput(Ta5d6ff'Ta5d6fffailedTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"
Tff7b72/>
Tff7b72<input
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.message_failed_bubble_colorTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6fftextTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffinput-field monospace-field flex-1Ta5d6ff"
@Te6edf3input=Ta5d6ff"Ta5d6ffonBubbleColorInput(Ta5d6ff'Ta5d6fffailedTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"
Tff7b72/>
Tff7b72</div>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-2Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-medium text-gray-900 dark:text-gray-100Ta5d6ff"Tff7b72>Waiting ColorTff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex gap-2Ta5d6ff"Tff7b72>
Tff7b72<input
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.message_waiting_bubble_colorTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6ffcolorTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffw-12 h-10 rounded-xl border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 cursor-pointerTa5d6ff"
@Te6edf3input=Ta5d6ff"Ta5d6ffonBubbleColorInput(Ta5d6ff'Ta5d6ffwaitingTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"
Tff7b72/>
Tff7b72<input
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.message_waiting_bubble_colorTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6fftextTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffinput-field monospace-field flex-1Ta5d6ff"
@Te6edf3input=Ta5d6ff"Ta5d6ffonBubbleColorInput(Ta5d6ff'Ta5d6ffwaitingTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"
Tff7b72/>
Tff7b72</div>
Tff7b72</div>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-2Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center justify-betweenTa5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-medium text-gray-900 dark:text-gray-100Ta5d6ff"Tff7b72>Inbound Color (Optional)Tff7b72</div>
Tff7b72<button
Te6edf3v-if=Ta5d6ff"Ta5d6ffconfig.message_inbound_bubble_colorTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] text-red-500 font-bold uppercase hover:underlineTa5d6ff"
@Te6edf3click=Ta5d6ff"Ta5d6ffonInboundBubbleResetTa5d6ff"
Tff7b72>
Reset to default
Tff7b72</button>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex gap-2Ta5d6ff"Tff7b72>
Tff7b72<input
Te6edf3v-if=Ta5d6ff"Ta5d6ffconfig.message_inbound_bubble_colorTa5d6ff"
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.message_inbound_bubble_colorTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6ffcolorTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffw-12 h-10 rounded-xl border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 cursor-pointerTa5d6ff"
@Te6edf3input=Ta5d6ff"Ta5d6ffonBubbleColorInput(Ta5d6ff'Ta5d6ffinboundTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"
Tff7b72/>
Tff7b72<div
Te6edf3v-if=Ta5d6ff"Ta5d6ff!config.message_inbound_bubble_colorTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffflex-1 flex items-center px-3 text-xs text-gray-400 bg-gray-50 dark:bg-zinc-900 rounded-xl border border-dashed border-gray-200 dark:border-zinc-800 italicTa5d6ff"
Tff7b72>
Using theme default. Click to customize ->
Tff7b72<button
Te6edf3class=Ta5d6ff"Ta5d6ffml-2 px-2 py-1 bg-blue-500 text-white rounded-lg not-italic font-boldTa5d6ff"
@Te6edf3click=Ta5d6ff"Ta5d6ffonInboundBubbleCustomizeTa5d6ff"
Tff7b72>
Customize
Tff7b72</button>
Tff7b72</div>
Tff7b72<input
v-else
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.message_inbound_bubble_colorTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6fftextTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffinput-field monospace-field flex-1Ta5d6ff"
@Te6edf3input=Ta5d6ff"Ta5d6ffonBubbleColorInput(Ta5d6ff'Ta5d6ffinboundTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"
Tff7b72/>
Tff7b72</div>
Tff7b72</div>
Tff7b72</div>
Tff7b72</div>
Tff7b72</section>
Tff7b72</template>
Tff7b72<scriptTff7b72>
import Toggle from "../../forms/Toggle.vue";
import MaterialDesignIcon from "../../MaterialDesignIcon.vue";
export default {
name: "AppearanceSettingsSection",
components: {
Toggle,
MaterialDesignIcon,
},
props: {
visible: {
type: Boolean,
default: true,
},
config: {
type: Object,
required: true,
},
detailedOutboundSendStatus: {
type: Boolean,
default: false,
},
outboundTransferProgressEnabled: {
type: Boolean,
default: false,
},
messageTimestampGroupingEnabled: {
type: Boolean,
default: false,
},
messageIconPreviewStyle: {
type: Object,
default: () => ({}),
},
},
emits: [
"update-field",
"theme-change",
"messages-sidebar-position-change",
"message-font-size-change",
"message-icon-size-change",
"ui-transparency-change",
"ui-glass-enabled-change",
"messages-multi-pane-enabled-change",
"nomad-tabs-enabled-change",
"rrc-enabled-change",
"rrc-unread-badges-enabled-change",
"reset-appearance-defaults",
"detailed-outbound-send-status-change",
"outbound-transfer-progress-enabled-change",
"message-timestamp-grouping-change",
"bubble-color-change",
],
methods: {
emitField(key, value, eventName, eventArg) {
this.$emit("update-field", { key, value });
if (eventName) {
if (eventArg !== undefined) {
this.$emit(eventName, eventArg);
} else {
this.$emit(eventName);
}
}
},
onThemeSelect(event) {
this.emitField("theme", event.target.value, "theme-change");
},
onMessagesSidebarPositionSelect(event) {
this.emitField("messages_sidebar_position", event.target.value, "messages-sidebar-position-change");
},
onMessageFontSizeInput(event) {
this.emitField("message_font_size", Number(event.target.value), "message-font-size-change");
},
onMessageIconSizeInput(event) {
this.emitField("message_icon_size", Number(event.target.value), "message-icon-size-change");
},
onUiTransparencyInput(event) {
this.emitField("ui_transparency", Number(event.target.value), "ui-transparency-change");
},
onUiGlassEnabledToggle(value) {
this.emitField("ui_glass_enabled", value, "ui-glass-enabled-change");
},
onMessagesMultiPaneEnabledToggle(value) {
this.emitField("messages_multi_pane_enabled", value, "messages-multi-pane-enabled-change");
},
onNomadTabsEnabledToggle(value) {
this.emitField("nomad_tabs_enabled", value, "nomad-tabs-enabled-change");
},
onRrcEnabledToggle(value) {
this.emitField("rrc_enabled", value, "rrc-enabled-change");
},
onRrcUnreadBadgesEnabledToggle(value) {
this.emitField("rrc_unread_badges_enabled", value, "rrc-unread-badges-enabled-change");
},
onBubbleColorInput(type, event) {
this.emitField(`message_${type}_bubble_color`, event.target.value, "bubble-color-change", type);
},
onInboundBubbleReset() {
this.emitField("message_inbound_bubble_color", null, "bubble-color-change", "inbound");
},
onInboundBubbleCustomize() {
this.emitField("message_inbound_bubble_color", "#ffffff", "bubble-color-change", "inbound");
},
},
};
Tff7b72</script>
Served by rngit 1.5.2 - Generated in 0.03s